import Typography from '@/pages/OrderModule/common/components/Typography';
import { useMemo } from 'react';
import { formatZjfImg } from '@/utils/utils.jsx';
import { Popover } from 'antd';
import Style from './index.module.less';
import CommonTag from '@/components/CommonTag';

export const GoodField = (props) => {
	const { record, config, showRefund = false } = props;
	const resolveConfigInfo = useMemo(() => new Set(config.info), [config.info]);

	const nameSectionText = (resolveConfigInfo.has('name') ? (record.name || '') : '') + ' ' + (resolveConfigInfo.has('color') ? (record.color || '') : '');
	const codeSectionText = (resolveConfigInfo.has('goods') ? (record.goods || '') : '') + ' ' + (resolveConfigInfo.has('style') ? (record.style || '') : '');

	const imageStyleMap = {
		small: {
			width: 32,
			height: 32,
		},
		large: {
			width: 64,
			height: 64,
		},
		none: {
			width: 0,
			height: 0,
			display: 'none'
		},
	};

	return (
		<div className={Style.goods_wrap}>
			<div
				style={{
					...imageStyleMap[config.image],
				}}
			>
				<Popover mouseEnterDelay={0.3} content={<img
					className={Style.goods_image}
					src={formatZjfImg(record.image, record.storeId, '64x64')}
					alt=""
				/>}>
					<img
						className={Style.goods_image}
						style={{
							width: '100%',
							height: '100%',
						}}
						src={formatZjfImg(record.image, record.storeId, '64x64')}
						alt=""
						onClick={(e) => e.stopPropagation()}
					/>
				</Popover>
			</div>
			<div className={Style.goods_content}>
				<div className={Style.goodsName}>
					{ nameSectionText.replaceAll(' ', '') && <Popover mouseEnterDelay={0.5} content={<div style={{ maxWidth: '320px' }}>{nameSectionText}</div>}>
						<div className='textOverflowMultiTwo'>{nameSectionText}</div>
					</Popover>}
					{ codeSectionText.replaceAll(' ', '') && <Popover mouseEnterDelay={0.5} content={<div style={{ maxWidth: '320px' }}>{codeSectionText}</div>}>
					  <div className='textOverflowMultiTwo'>{codeSectionText}</div>
					</Popover>}
				</div>
				{/* <div className={Style.goodsPrice}>
					<Typography as="s1">
						{record.price ? `¥ ${record.price}` : ''}
					</Typography>
				</div> */}
				{
					Boolean(record.count) && (<div className={Style.goods_count}>
						<Typography as="s1">
							{record.count}
						</Typography>
					</div>)
				}
                {showRefund && [1 ,2].includes(record.refundStatus) &&
                    <div className={Style.refund_icon}>
                        {
                            record.refundStatus == 2 && <CommonTag type="alreadyTui" />
                        }
                        {
                            record.refundStatus == 1 && <CommonTag type="notTui" />
                        }
                    </div>
                }
			</div>
		</div>
	);
};
export default GoodField;
